<template>
	<!-- 爆品 -->
	<scroll-view class="scrollSty" :scroll-y="true" @scrolltolower="scrolltolowerFnc">
		<view class="explosiveGoods-main">
			<!-- 背景图 -->
			<view class="explosiveGoods-back">
				<image src="https://test-zyxx-img.oss-cn-shenzhen.aliyuncs.com/uploads/20241203/639e00feec34e6bc7739a21450dddc15.png" mode="aspectFill" style="width: 100%; height: 100%"></image>
			</view>

			<!-- 商品列表 -->
			<view class="explosiveGoods-shop">
				<view class="shopItem" v-for="(item, index) in shopList" :key="item.id">
					<hwxcShopSidewise :shopInfo="item" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
import hwxcShopSidewise from '../../components/hwxcShopSidewise/hwxcShopSidewise.vue';
import { cloudhotList } from '../../api/home/index.js';
export default {
	data() {
		return {
			// 商品列表
			shopList: [],
			queryData: {
				page: 1,
				limit: 10
			}
		};
	},
	components: {
		hwxcShopSidewise
	},
	async onLoad() {
		await this.getcloudhotList();
	},
	methods: {
		async getcloudhotList() {
			try {
				const resData = await cloudhotList(this.queryData);
				let list = resData.data.data || [];
				this.shopList = [...(this.shopList || []), ...list];
			} catch (e) {
				throw Error(e);
			}
		},

		// 触底
		async scrolltolowerFnc() {
			this.queryData.page++;
			await this.getcloudhotList();
		}
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	height: 100%;
}
</style>

<style scoped lang="scss">
.scrollSty {
	flex: 1;
	overflow-y: scroll;
	background-color: #e43927;
}
.explosiveGoods-main {
	.explosiveGoods-back {
		height: 500rpx;
		width: 100%;
	}
	.explosiveGoods-shop {
		box-sizing: border-box;
		padding: 20rpx;
		.shopItem {
			background-color: #fff;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>
